<template>
    <a-layout>
        <a-layout-header id="header">
      <div id="head-left">
        <router-link
          to="/"
          style="display: flex; justify-content: center; align-items: center"
        >
          <HomeFilled :style="{ fontSize: '26px' }" id="home-icon" />
        </router-link>
        <div id="head-text">全部基地</div>
      </div>
      <LogoutOutlined :style="{ fontSize: '22px' }" id="logout-icon" />
    </a-layout-header>
    <!-- 搜索 -->
    <div style="width:100%;height:70px;display: flex; align-items: center; justify-content: flex-start; padding-top: 20px;">
            <div style="display: flex; width: 25%;justify-content: center;">
                <el-form-item label="培训基地">
                    <el-input v-model="searchParam.trainingBase" placeholder="请输入培训基地" />
                </el-form-item>
            </div>
            <div @click="refreshList">
                <div style=" width: 75%;">
                    <el-button type="primary" :icon="Search" style=" padding-left: 10px; padding-right:10px;margin-bottom: 16px;">搜索</el-button>
                </div>
            </div>
        </div>
        <!-- 表格区 -->
        <el-table :data="columnData"  highlight-current-row  stripe style="width: 100%" class="userTable">
            <el-table-column prop="id" label="id" align="center">
            </el-table-column>
            <el-table-column prop="no" label="基地代码" >
            </el-table-column>
            <el-table-column prop="trainingBase" label="培训基地" >
            </el-table-column>
            <el-table-column prop="personId" label="基地管理员ID" >
            </el-table-column>
            <el-table-column prop="address" label="基地地点" >
            </el-table-column>
                <el-table-column prop="describe" label="基地描述" >
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right">
                <template #default="{ row }">
                    <el-button size="small" type="primary" @click="rowClickEditHandle(row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="rowClickDelHandle(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total=this.total
        class="mt-4"
        @current-change="handleCurrentChange"
    />
    <a-layout-footer style="text-align: center">
      Front Third Group ©2023
    </a-layout-footer>

    <el-dialog v-model="dialogVisible" title="编辑基地信息" width="60%" draggable>
        <div>
            <el-form :inline="true" :model="formState" class="demo-form-inline">
                <el-form-item style="text-align: start;" label="基地代码">
                    <el-input v-model="formState.no" placeholder="基地代码" clearable />
                </el-form-item>
                <el-form-item style="text-align: start;" label="培训基地">
                    <el-input v-model="formState.trainingBase" placeholder="培训基地" clearable />
                </el-form-item>
                <el-form-item style="text-align: start;" label="基地管理员ID">
                    <el-input v-model="formState.personId" readonly placeholder="基地管理员ID" clearable />
                </el-form-item>
                <el-form-item style="text-align: start;" label="基地地点">
                    <el-input v-model="formState.address" placeholder="基地地点" clearable />
                </el-form-item>
                <el-form-item style="text-align: start;" label="基地描述">
                    <el-input v-model="formState.describe" placeholder="基地描述" clearable />
                </el-form-item>
            </el-form>

        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="configSubmit">确认提交</el-button>
        </span>
        </template>
    </el-dialog>
    </a-layout>
</template>

<script setup>
import {
  //跳转至主页
  HomeFilled,
  LogoutOutlined,
} from "@ant-design/icons-vue";
</script>

<script >
import axios from "axios"; 
export default { 
    data() { 
    return { 
        columnData:  [],
        searchParam: {
            trainingBase:''
        },
        currentPage:1,
        pageSize:10,
        total:10,
        dialogVisible:false,
        formState:{
            no:'',
            personId:'',
            trainingBase:'',
            describe:'',
            address:''
        }
    };
 }, 
 
 mounted() {
   this.initData()
 },
 methods: {
    initData(){
        var paramsVal = '?currentPage='+this.currentPage + '&pageSize='+ this.pageSize
        axios.post('https://localhost:44305/api/Base/GetAllBase'+paramsVal) // 后端数据接口URL
        .then(response => { 
            console.log(response)
            if(response.totalNums=='0'){
                this.columnData = [];
                this.total = 10
            }else{
                this.columnData = [];
                response.data.data.forEach(item => {
                    if(item.status == 'Success'){
                        this.columnData.push(item.baseInfo);
                        console.log(this.columnData,'99')
                    }else{
                        this.columnData = []
                    }
                });
                this.total = response.data.totalNums;
            }
        }) 
        .catch(error => { 
            console.error(error); 
        });
    },
    rowClickEditHandle(val){
        var rowData = JSON.parse(JSON.stringify(val))
        //编辑
        //dialogVisible
        this.dialogVisible = true;
        this.formState = rowData;
        console.log(rowData);
    },
    configSubmit(){
        axios.put('https://localhost:44305/api/Base/ModifyBase', this.formState) // 后端数据接口URL
            .then(response => { 
                alert(response.data.msg)
                this.initData();
                this.dialogVisible = false;
            }) 
            .catch(error => { 
                console.error(error); 
                alert("更新失败！")
                this.dialogVisible = false;
            });

    },
    rowClickDelHandle(val) {
        var rowData = JSON.parse(JSON.stringify(val))
        //删除
        console.log(rowData.id)
        //trainingBase no
        //https://localhost:44305/api/Base/DeleteBase?no=1&trainingBase=1
        var obj = {
            no :rowData.no,
            trainingBase :rowData.trainingBase
        }
        axios.delete('https://localhost:44305/api/Base/DeleteBase',{params:obj}) // 后端数据接口URL
            .then(response => { 
                alert(response.data.msg)
                this.initData();
            }) 
            .catch(error => { 
                console.error(error); 
            });
    },
    //查询
    refreshList(){
        //this.searchParam.trainingBase
        if(this.searchParam.trainingBase == ''){
            this.initData()
        }else{
            var paramsValue = this.searchParam.trainingBase;
            var params = '?trainingBase='+paramsValue
            axios.get('https://localhost:44305/api/Base/GetBaseInfo'+params) // 后端数据接口URL
            .then(response => { 
                console.log(response.data);
                this.columnData = [];
                response.data && response.data.forEach(item=>{
                    if(item.status == "Success"){
                        this.columnData.push(item.baseInfo);
                        this.total = response.data.length;
                    }else{
                        alert(item.msg)
                    }
                })

            }) 
            .catch(error => { 
                console.error(error); 
            });
        }
        
    },
    handleCurrentChange(val){
        this.currentPage = val
        this.initData()
    },
  }
    
};





</script>

<style>
#main-form {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#form-one {
    flex: 1;
}

#form-two {
    flex: 1;
}

#header {
    background-color: white;
    display: flex;
    flex-direction: row;
    padding: 0px;
    align-items: center;
    justify-content: center;
}

#head-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 3;
}

#home-icon {
    margin-left: 20px;
    margin-right: 20px;
    flex: 1;
}

#head-text {
    font-size: 18px;
    flex: 6
}

#logout-icon {
    flex: 8;
    display: flex;
    justify-content: end;
    padding-right: 30px;
}
</style>
<style>
.mt-4{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.demo-form-inline .el-input {
  --el-input-width: 360px;
}

</style>

